<template>
  <div>
    <!--    功能按钮 -->
    <el-row id="button" :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-folder-add"
          size="mini"
          v-on:click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable=""></right-toolbar>
    </el-row>

    <el-table id="formDataTable" v-loading="loading" :data="formData" @selection-change="">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="任务id" align="center" prop="scheduleId"/>
      <el-table-column label="任务名称" align="center" prop="scheduleName"/>
      <el-table-column label="开始日期" align="center" prop="scheduleId"/>
      <el-table-column label="结束日期" align="center" prop="scheduleId"/>
      <el-table-column label="开始时间段" align="center" prop="scheduleId"/>
      <el-table-column label="结束时间段" align="center" prop="scheduleId"/>
      <el-table-column label="运行频率" align="center" prop="scheduleId"/>
      <el-table-column label="频率单位" align="center" prop="scheduleId"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      </el-table-column>
    </el-table>
    <!-- 添加修改-->
    <el-dialog id="handleAddOrUpdate" :title="title" :visible.sync="open" @open="onOpen" @close="onClose"
               title="Dialog Titile">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="任务名称" prop="scheduleName">
              <el-input v-model="formData.scheduleName" placeholder="请输入任务名称" :maxlength="12" show-word-limit
                        clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker v-model="formData.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择开始日期" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker v-model="formData.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择结束日期" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-time-picker v-model="formData.startTime" format="HH:mm:ss" value-format="HH:mm:ss"
                              :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
                              placeholder="请选择时间选择" clearable></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-time-picker v-model="formData.endTime" format="HH:mm:ss" value-format="HH:mm:ss"
                              :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
                              placeholder="请选择时间选择" clearable></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运行频率" prop="rate">
              <el-input v-model="formData.rate" placeholder="请输入运行频率" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="频率单位" prop="rateUnit">
              <el-select v-model="formData.rateUnit" placeholder="请选择频率单位" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in rateUnitOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择通道" prop="channelPresetInfoList">
              <el-cascader v-model="formData.channelPresetInfoList" placeholder="请选择选择通道" clearable
                           :style="{width: '100%'}"
                           :options="channelOptions"
                           collapse-tags
                           :props="{ multiple: true, expandTrigger: 'hover' }"

                           filterable>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="预设点" prop="channelPresetInfoList">
              <el-button type="primary" icon="el-icon-search" size="medium"> 主要按钮</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
<!--    测试-->
    <a>{{formData}}</a>



    <button v-on:click="send">getInfo</button>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: [],
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      channelOptions: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }
      ]
      ,
      open: false,
      formData: {
        scheduleName: '',
        startDate: null,
        endDate: null,
        startTime: null,
        endTime: null,
        rate: undefined,
        rateUnit: undefined,
        channelPresetInfoList: undefined,
      },
      rules: {
        scheduleName: [{
          required: true,
          message: '请输入任务名称',
          trigger: 'blur'
        }],
        startDate: [{
          required: true,
          message: '请选择开始日期',
          trigger: 'change'
        }],
        endDate: [{
          required: true,
          message: '请选择结束日期',
          trigger: 'change'
        }],
        startTime: [{
          required: true,
          message: '开始时间不能为空',
          trigger: 'change'
        }],
        endTime: [{
          required: true,
          message: '结束时间不能为空',
          trigger: 'change'
        }],
        rate: [{
          required: true,
          message: '请输入运行频率',
          trigger: 'blur'
        }],
        rateUnit: [{
          required: true,
          message: '请选择频率单位',
          trigger: 'change'
        }],
        channelPresetInfoList: [{
          required: true,
          message: '请选择选择通道',
          trigger: 'change'
        }],
      },
      rateUnitOptions: [{
        "label": "秒",
        "value": 1
      },
        {
          "label": "分钟",
          "value": 2
        }
        , {
          "label": "小时",
          "value": 3
        }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    handleAdd() {
      this.open = true
      this.title = "新增任务"
    },
    send:function(){
      this.$http.get('http://192.168.1.140:80/openapi/schedule/capture/list',
        {params:this.queryParams}
      ).then(function (resp) {
        console.log(resp)
        this.formData = resp
      })

    },
    getTableData(){
      this.$http.get('http://192.168.1.140:80/openapi/schedule/capture/list',
        {params:this.queryParams}
      ).then(function (resp) {
        console.log(resp)
        this.formData = resp
      })
    },
    handleEdit(index, row) {
      console.log(index, row.name);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
    getList(){
      axios({
        method:'get',
        url:'http://192.168.1.228:80 /openapi/schedule/capture/list',
        data:this.queryParams
      }).then(function(res){
        console.log(res);
      });
    },
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },


}

</script>
<style>
</style>
